<template>
    <div class="maintenance-list">
        <div class="page-header">
            <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/gongwuwxsqd/gongwuwxsqd">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link> -->
            <el-button type="primary" style="margin-right: 20px;"
                @click="$router.push('/main/renshi/renshizhidu/gongwuwxsqd/gongwuwxsqd')"
                icon="el-icon-back">返回</el-button>

            <h2>工务/维修申请单列表</h2>
        </div>
        <div class="search-container">
            <input v-model="searchForm.applyDepartment" placeholder="请输入申请部门" />
            <input v-model="searchForm.applicant" placeholder="请输入申请人" />
            <button @click="handleSearch">搜索</button>
            <button @click="handleAdd">新增</button>
            <!-- <button @click="goBack">返回</button> -->
        </div>

        <table border="1" style="width: 100%; text-align: center;">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>申请部门</th>
                    <th>申请人</th>
                    <th>申请日期</th>
                    <th>维修地点</th>
                    <th>维修方式</th>
                    <th>费用</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData" :key="item.id">
                    <td>{{ (current - 1) * size + index + 1 }}</td>
                    <td>{{ item.applyDepartment }}</td>
                    <td>{{ item.applicant }}</td>
                    <td>{{ item.applyDate }}</td>
                    <td>{{ item.maintenanceLocation }}</td>
                    <td>{{ item.maintenanceMethod }}</td>
                    <td>{{ item.cost }}</td>
                    <!-- <td>{{ getStatus(item) }}</td> -->
                    <td><span :class="getStatusClass(item)">{{ getStatus(item) }}</span></td>
                    <td class="pagination">
                        <button @click="handleView(item)" style="background-color: darkgray;">查看</button>
                        <button @click="handleEdit(item)">编辑</button>
                        <button @click="handleDelete(item.id)" style="background-color: #ff00009e;">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="pagination">
            <button :disabled="current === 1" @click="handlePageChange(current - 1)">上一页</button>
            <span>第 {{ current }} 页 / 共 {{ total }} 条</span>
            <button :disabled="current * size >= total" @click="handlePageChange(current + 1)">下一页</button>
        </div>
    </div>
</template>

<script>
import { getMaintenanceFormPage, deleteMaintenanceForm } from '@/api/maintenance'

export default {
    data() {
        return {
            searchForm: {
                applyDepartment: '',
                applicant: ''
            },
            tableData: [],
            current: 1,
            size: 10,
            total: 0
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        formatDate(dateStr) {
            if (!dateStr) return ''
            return dateStr.split('T')[0]
        },
        async fetchData() {
            try {
                const result = await getMaintenanceFormPage(
                    this.current,
                    this.size,
                    this.searchForm.applyDepartment,
                    this.searchForm.applicant
                )
                if (result.data) {
                    this.tableData = result.data.records.map(item => ({
                        ...item,
                        applyDate: this.formatDate(item.applyDate),
                        acceptDate: this.formatDate(item.acceptDate)
                    }))
                    this.total = result.data.total
                }
            } catch (error) {
                console.error('获取数据失败', error)
                this.$message.error('获取数据失败')
            }
        },
        handleSearch() {
            this.current = 1
            this.fetchData()
        },
        goBack() {
            this.$router.push('/main/renshi/renshizhidu/gongwuwxsqd/gongwuwxsqd')
        },
        handleAdd() {
            this.$router.push('/main/renshi/renshizhidu/gongwuwxsqd/gongwuwxsqd')
        },
        handleView(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/gongwuwxsqd/gongwuwxsqd',
                query: { id: row.id, type: 'view' }
            })
        },
        handleEdit(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/gongwuwxsqd/gongwuwxsqd',
                query: { id: row.id, type: 'edit' }
            })
        },
        async handleDelete(id) {
            try {
                await this.$confirm('确认删除该记录吗？')
                const result = await deleteMaintenanceForm(id)
                if (result) {
                    this.$message.success('删除成功')
                    this.fetchData()
                }
            } catch (error) {
                if (error !== 'cancel') {
                    console.error('删除失败', error)
                    this.$message.error('删除失败')
                }
            }
        },
        async handlePageChange(page) {
            this.current = page
            await this.fetchData()
        },
        // 其他方法...
        getStatusClass(item) {
            if (item.chairmanOpinion === '同意') {
                return 'approved';
            } else if (item.chairmanOpinion === '不同意') {
                return 'rejected';
            } else if (item.hrDepartmentOpinion) {
                return 'pending';
            } else if (item.generalManagerOpinion) {
                return 'pending';
            } else {
                return 'pending';
            }

        },
        getStatus(item) {
            if (item.chairmanOpinion === '同意') {
                return '已批准'
            } else if (item.chairmanOpinion === '不同意') {
                return '已驳回'
            } else if (item.hrDepartmentOpinion) {
                return '企管部审核中'
            } else if (item.generalManagerOpinion) {
                return '总经理审核中'
            } else {
                return '待审核'
            }
        }
    }
}
</script>

<style scoped>
.maintenance-list {
    padding: 20px;
    /* background-color: #f5f7fa; */
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    min-height: calc(100vh - 40px);
    font-family: '宋体', sans-serif;
    /* 设置全局字体为宋体 */
    width: 1200px;
    margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #409EFF;
    font-size: 16px;
    margin-right: 20px;
    transition: all 0.3s;
}

.back-link i {
    margin-right: 5px;
}

.back-link:hover {
    opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #303133;
}

.search-container {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px 0px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.search-container input {
    margin-right: 10px;
    padding: 8px;
    /* 增加输入框内边距 */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: '宋体', sans-serif;
    /* 设置输入框字体为宋体 */
}

.search-container button {
    margin-right: 10px;
    padding: 8px 15px;
    /* 增加按钮内边距 */
    border: none;
    background-color: #409EFF;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-family: '宋体', sans-serif;
    /* 设置按钮字体为宋体 */
    transition: background-color 0.3s;
    font-size: 1em;
}

/* 
button {
    margin: 3px;
    padding: 4px 10px;
    /* 增加按钮内边距 
} */

.search-container button:hover {
    background-color: #3a8ee6;
}

table {
    border-collapse: collapse;
    margin-bottom: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

th,
td {
    padding: 12px;
    /* 增加表格单元格内边距 */
    border: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.pagination button {
    padding: 8px 15px;
    border: none;
    background-color: #409EFF;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-family: '宋体', sans-serif;
    transition: background-color 0.3s;
}

.pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
    background-color: #3a8ee6;
}

.approved {
    border: 1px solid green;
    padding: 4px;
    background-color: rgba(0, 128, 0, 0.2);
    border-radius: 5px;
    padding: 8px 10px;
}

.rejected {
    border: 1px solid red;
    padding: 4px;
    background-color: rgba(255, 0, 0, 0.2);
    border-radius: 5px;
    padding: 8px 10px;
}

.pending {
    border: 1px solid orange;
    padding: 4px;
    background-color: rgba(255, 166, 0, 0.2);
    border-radius: 5px;
    padding: 8px 10px;
}
</style>